import './style.css';
// 加载图形
const request = require.context('@/assets/icons/svg', true, /\.svg$/i);
request.keys().forEach(request);

/**
 * 获取svg图标字符串
 * @param {*} name
 * @param {*} className
 */
export function getSvgIconText(name = 'default', className = '') {
  return `<svg class="svg-icon ${className}"><use xlink:href="#icon-${name}"></use></svg >`;
}

/**
 * 获取svg图标dom元素
 * @param {*} name
 * @param {*} className
 */
export function getSvgIconElement(name, className = '') {
  const temp = document.createElement('div');
  temp.innerHTML = getSvgIconText(name, className);
  return temp.firstElementChild;
}

/**
 * 修改svg图标颜色
 * @param {*} id
 * @param {*} color
 */
export function changeSvgIconColor(name, color) {
  const symbol = document.getElementById('icon-' + name);
  if (symbol) {
    // 改变填充和线条颜色
    const flag = 'svg-change-color';
    const items = symbol.getElementsByClassName(flag);
    for (const key in items) {
      if (items.hasOwnProperty(key)) {
        const element = items[key];
        element.style.stroke = color;
        element.style.fill = color;
      }
    }

    // 改变线条颜色
    const stroke = 'svg-change-stroke';
    const strokeItems = symbol.getElementsByClassName(stroke);
    for (const key in strokeItems) {
      if (strokeItems.hasOwnProperty(key)) {
        const element = strokeItems[key];
        element.style.stroke = color;
      }
    }

    // 改变填充颜色
    const fill = 'svg-change-fill';
    const fillItems = symbol.getElementsByClassName(fill);
    for (const key in fillItems) {
      if (fillItems.hasOwnProperty(key)) {
        const element = fillItems[key];
        element.style.fill = color;
      }
    }
  }
}
